<template>
  <div class="userAccountPage">
    <div class="accountBox">
      <div>
        <div class="ac_title">
          <!-- <h3>账户信息</h3> -->
        </div>
        <div class="ac_container"> 
           <div class="ac_navBox">
              <el-menu :default-active="activeIndex" class="el-menu-unav" 
               mode="horizontal" @select="orderSelect" 
              background-color="white"
              active-text-color="white" text-color="black">
                <el-menu-item index="1">全部信息</el-menu-item>
                <el-menu-item index="2">待付款</el-menu-item>
                <el-menu-item index="3">待收货</el-menu-item>
                <el-menu-item index="4">已完成</el-menu-item>
                 <el-menu-item index="5">退换售后</el-menu-item>
                <!-- <el-menu-item index="4" disabled>消息中心</el-menu-item>
                <el-menu-item index="5"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item> -->
              </el-menu>
           </div>
          <div class="detail_info">
            <router-view></router-view>
          </div>
        </div>
      </div>
     
    </div>
  </div>
</template>

<script>
export default {
  name: 'userAccount',
  data () {
    return {
      msg: '',
      activeIndex: '1',
    }
  },
  methods: {
      orderSelect(key, keyPath) {
        console.log(key, keyPath);
        if(key=='1'){
            this.$router.push('/userCenter/userOrder/orderAll');
        }else if(key=='2'){
            this.$router.push('/userCenter/userOrder/orderChecked');
        }else if(key=='3'){
            this.$router.push('/userCenter/userOrder/orderReceive');
        }else if(key=='4'){
            this.$router.push('/userCenter/userOrder/orderOver');
        }else if(key=='5'){
            this.$router.push('/userCenter/userOrder/orderAfterSale');
        }else{
            this.$router.push('/userCenter/userOrder/');
        }
      },
  },
  mounted () {

  }
}
</script>

<style scoped>
.userAccountPage{
  font-family: "Helvetica Neue", Helvetica, Arial, PingFang, "Microsoft YaHei", 雅黑体, SimHei, sans-serif;
  color: rgb(3, 3, 3);
}
.accountBox{
  position: relative;
  padding: 10px;
  margin-left: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
  /* border:1px solid red; */
}
li{
  list-style-type: none;
}
.ac_title{
    font-family: "Helvetica Neue", Helvetica, Arial, PingFang, "Microsoft YaHei", 雅黑体, SimHei, sans-serif;
  color: rgb(3, 3, 3);
  font-size: 20px;
}
.ac_container{
  position: relative;
  width: 70%;
   /* border:1px solid red; */
   /* border-right: 1px solid rgb(219, 219, 219); */
}
.ac_navBox{
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
}
.el-menu-unav{
    border-right: none;
  position: relative;
}
.el-menu-unav >>> li{
  font-size: 16px;
  font-weight: 500;
  width: 100px;
  margin-left: 40px;
  
  color: rgb(151, 149, 149) !important;
}
.el-menu-unav >>> li:focus{
  background: transparent !important;
}
.el-menu-unav >>> li:hover{
  background: transparent !important;
  border-bottom-color: 1px solid #111 !important;
   text-underline-offset: 7px;
    text-decoration: underline .5px rgb(17, 17, 17);
}
.el-menu-unav >>> .el-menu-item{
  /* margin-bottom: 10px; */
  height: 40px !important;
  line-height: 30px !important;
  border-bottom: none;
}
.el-menu-unav >>> .el-menu-item.is-active{
    transition: .3s;
    /* font-size: 20px;
    font-weight: 500; */
    text-underline-offset: 7px;
    color: rgb(23, 23, 23) !important;
    text-decoration: underline 1.5px rgb(17, 17, 17);
}

.detail_info{
  position: relative;
  padding: 2px;
  margin-left: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  /* border:1px solid red; */
  /* border-bottom: 1px solid gainsboro; */
  width: 80%;
}
</style>
